<template>
  <div class="texts">
    <el-row class="tac">
      <el-col :span="5">
        <div class="title">
          <p>「古籍目录」</p>
        </div>
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
          <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="19" class="right">
        <p>《本草从新》&nbsp;&nbsp;&nbsp;清&nbsp;&nbsp;&nbsp;&nbsp;吴伊罗</p>
        <div class="doc_text">
          <p>
            余先世藏书最伙，凡有益于民用者，购之尤亟。以故岐黄家言，亦多海内希见之本。余自髫年，习制举业时，即旁览及焉。遇有会意，辄觉神情开涤，于是尽发所藏而精绎之，迄今四十年矣。夫医学之要，莫先于明理，其次则在辨证，其次则在用药。理不明，证于何辨？证不辨，药于何用？故拙著医学十种，其一曰∶一源必彻；其二曰∶四诊须详。于经义病情，必斟酌群言，而期于至当也。而又念天之生药，凡以济斯人之疾苦者也，有一病，必有一药。用眩，凡药皆可伤人，况于性最偏驳者乎？自来注本草者，古经以下，代有增订。而李氏纲目为集大成，其征据该洽，良足补尔雅诗疏之缺。而以备医学之用，或病其稍繁。
            踵之者，有缪氏之经疏，不特着药性之功能，且兼言其过劣，其中多所发明。而西昌喻嘉言，颇有异议。最后新安汪氏，祖述二书，着备要一编。卷帙不繁，而采辑甚广，宜其为近今脍炙之书也。独惜其本非岐黄家，不临证而专信前人，杂采诸说，无所折衷，未免有承误之失。余不揣固陋，取其书重订之。
            因仍者半，增改者半，旁掇旧文，参以涉历，以扩未尽之旨。书成，名曰《本草从新》。付之剞劂，庶几切于时用，而堪羽翼古人矣乎。其余数种，将次第刊布，与有识者商之。
          </p>
          <div class="block">
            <el-button type="success" size="small" class="change">图</el-button>
            <el-button type="warning" size="small" class="change">文</el-button>
            <el-pagination
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style>
  .texts {
    width: 60%;
    margin: auto;
    background-color: #f0f0f0;
  }
  .texts .tac{
    height:100% !important;
  }
  .texts .title{
     background-image: url("../assets/img/title_bg.png");
    color: white;
    line-height: 46px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .el-submenu__title{
    padding-left: 12px !important;
  }
  .el-menu{
    background-color: #f6f6f6;
    border: solid 1px #e4e4e4;
  }
  .el-menu-item-group__title{
    height:0 !important;
    padding:0;
  }
  .texts .right p{
    text-align: left;
    margin-left: 40px;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: solid 3px #c0a369;
  }
  .doc_text{
    margin-left: 40px;
    background-color: white;
    padding-bottom: 30px;
  }
  .doc_text p{
    border:none !important;
    background-color: white;
    padding:20px;
    margin-left: 0!important;
    height:100%;
  }
  .block{
    margin-top: 20px;
    width:50%;
    margin:auto;
  }
  .block .change{
    float: left;
    margin-right: 20px;
  }
</style>
